<template>
  <div :class="$style.body">
    <p :class="$style.title"
      ft18>数据汇总</p>

    <div :class="$style.section">
      <el-card :class="$style.a">
        <div :class="$style.cardBody">
          <img src="@/icons/png/客户.png">
          <div>
            <p title>机会客户数</p>
            <p value>1,520</p>
          </div>
        </div>
      </el-card>
      <el-card :class="$style.b">
        <div :class="$style.cardBody">
          <img src="@/icons/png/客户.png">
          <div>
            <p title>机会订单总额</p>
            <p value>5,012,222.05</p>
          </div>
        </div>
      </el-card>
      <el-card :class="$style.c">
        <div :class="$style.cardBody">
          <p>公司年度目标进度(万)</p>
          <el-progress :text-inside="true"
            :stroke-width="20"
            :percentage="66"
            status="success"></el-progress>
        </div>
      </el-card>
    </div>

    <div :class="$style.sectionB">
      <el-card>
        <div slot="header"
          :class="$style.cardHeader">
          <span>销售业绩柱状图</span>
          <BaseSelect value="">
            <BaseSelectOption></BaseSelectOption>
          </BaseSelect>
        </div>
        <div :class="$style.barChart">
          <BarChart ref="BarChart"></BarChart>
        </div>
      </el-card>
      <el-card>
        <div slot="header"
          :class="$style.cardHeader">
          <span>公司业绩回款比例</span>
          <BaseSelect value="">
            <BaseSelectOption></BaseSelectOption>
          </BaseSelect>
        </div>
        <div :class="$style.barChart">
          <PieChart ref="PieChartA"></PieChart>
        </div>
      </el-card>
      <el-card>
        <div slot="header"
          :class="$style.cardHeader">
          <span>公司机会客户转化率</span>
          <BaseSelect value="">
            <BaseSelectOption></BaseSelectOption>
          </BaseSelect>
        </div>
        <div :class="$style.barChart">
          <PieChart ref="PieChartB"></PieChart>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import BarChart from './BarChart'
import { buildBarB } from './utils/buildBarChart'
import PieChart from './PieChart'
import buildPie from './utils/buildPieChart'
import BaseSelect from '@/components/BaseSelect'
import BaseSelectOption from '@/components/BaseSelectOption'

export default {
  components: {
    BarChart,
    PieChart,
    BaseSelect,
    BaseSelectOption
  },

  mounted() {
    this.$refs.BarChart.render(buildBarB())
    this.$refs.PieChartA.render(buildPie())
    this.$refs.PieChartB.render(buildPie())
  }
}
</script>

<style module lang="scss">
.body {
  margin-bottom: 40px;
}

.title {
  font-weight: bold;
}

.section {
  display: flex;
  margin-bottom: 20px;

  .a {
    margin-right: 15px;
  }

  .a,
  .b {
    flex-grow: 1;

    .cardBody {
      // padding: 30px 0;
      height: 100px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      > img:first-child {
        width: 60px;
        height: 60px;
      }
      > div:last-child {
        text-align: right;
        flex-grow: 1;
        > p {
          margin: 0;
        }

        [title] {
          font-size: 14px;
          margin-bottom: 15px;
        }
        [value] {
          font-size: 24px;
        }
      }
    }
  }

  .c {
    flex-grow: 2;
    margin-left: 15px;

    .cardBody {
      height: 100px;
    }
  }
}

.sectionB {
  display: flex;
  justify-content: space-between;

  > div {
    width: 32%;
    flex-shrink: 0;
    // min-width: 400px;
  }

  .barChart {
    height: 180px;
  }

  .cardHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
